{{ 'video-section.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}

<div class="tenways-video">
  <div class="t-page-layout slideshow-video-container swiper-container">
    <div class="video-content">
      <div class="content_video">
        <div class="page-width">
          <div class="video_text">
            {% if section.settings.text_p %}
              <div class="text_p">
                {{ section.settings.text_p }}</div>
            {% endif %}
            {% if section.settings.title %}
              <div class="title_video">
                {{ section.settings.title }}</div>
            {% endif %}
            {% if section.settings.text %}
              <div class="text_video">
                {{ section.settings.text }}</div>
            {% endif %}
          </div>
          <div class="video_button">
            {%- if section.settings.button_label != blank -%}
              <span class="ten-button ten-button_1">
                <a class="ten-hover button button--primary m-cta--light" {% if section.settings.button_link == blank %} role="link"{% else %} href="{{ section.settings.button_link }}" target="_self"{% endif %}>
                  <span>{{ section.settings.button_label | escape }}</span>
                </a>
              </span>
           {%- endif-%}



            {%- if section.settings.button_label_2 != blank -%}
              <span class="ten-button ten-button_2">
                <a class="ten-hover button button--primary" {% if section.settings.button_link_2 == blank %} role="link"{% else %} href="{{ section.settings.button_link_2 }}" target="_self"{% endif %}>
                  <span>{{ section.settings.button_label_2 | escape }}</span>
                </a>
              </span>
            {%- endif-%}
          </div>
        </div>
      </div>
    </div>

    <div class="video-auto">
      <div class="video-overlays"></div>

      <video loading="eager" class="video lazy" id="video" x5-video-player-type="h5" autoplay muted loop playsinline poster="{{ 'tenways_suzanne.jpg' | file_url }}">
        <source x5-video-player-type="h5" data-src="https://cdn.shopify.com/videos/c/o/v/20b8f3d5b740420eabb081a66bd58aee.mp4" type="video/webm">
        <source x5-video-player-type="h5" data-src="https://cdn.shopify.com/videos/c/o/v/20b8f3d5b740420eabb081a66bd58aee.mp4" type="video/mp4">
      </video>
    </div>

    {%- if section.settings.image != blank -%}
      <div class="swiper-wrapper">
        <div class="swiper-slide image_mobile banner__media media{% if section.settings.image_mobile == blank and section.settings.image == blank %} placeholder{% endif %}{% if section.settings.image != blank %} banner__media-half{% endif %}">
          <img srcset="
                        {%- if section.settings.image.width >= 375 -%}{{ section.settings.image | img_url: '375x' }} 375w,{%- endif -%}
                        {%- if section.settings.image.width >= 640 -%}{{ section.settings.image | img_url: '640x' }} 640w,{%- endif -%}
                        {%- if section.settings.image.width >= 1780 -%}{{ section.settings.image | img_url: '1780x' }} 1780w,{%- endif -%}
                        {%- if section.settings.image.width >= 2000 -%}{{ section.settings.image | img_url: '2000x' }} 2000w,{%- endif -%}
                        {%- if section.settings.image.width >= 3000 -%}{{ section.settings.image | img_url: '3000x' }} 3000w,{%- endif -%}
                        {%- if section.settings.image.width >= 3840 -%}{{ section.settings.image | img_url: '3840x' }} 3840w,{%- endif -%}
                        {{ section.settings.image | img_url: 'master' }} {{ section.settings.image.width }}w" sizes="{% if section.settings.image != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}" src="{{ section.settings.image | img_url: '1500x' }}" alt="{{ section.settings.image.alt | escape }}" width="{{ section.settings.image.width }}" height="{{ section.settings.image.width | divided_by: section.settings.image.aspect_ratio }}" {% if section.settings.image != blank %}class="banner__media-image-half"{% endif %}>
        </div>
        <!-- <div class="swiper-slide image_mobile banner__media media{% if section.settings.image_mobile == blank and section.settings.image == blank %} placeholder{% endif %}{% if section.settings.image != blank %} banner__media-half{% endif %}">
        <img
        srcset=" 
        {%- if section.settings.image_mobile.width >= 375 -%}{{ section.settings.image_mobile | img_url: '375x' }} 375w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 640 -%}{{ section.settings.image_mobile | img_url: '640x' }} 640w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 1780 -%}{{ section.settings.image_mobile | img_url: '1780x' }} 1780w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 2000 -%}{{ section.settings.image_mobile | img_url: '2000x' }} 2000w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 3000 -%}{{ section.settings.image_mobile | img_url: '3000x' }} 3000w,{%- endif -%}
        {%- if section.settings.image_mobile.width >= 3840 -%}{{ section.settings.image_mobile | img_url: '3840x' }} 3840w,{%- endif -%}
        {{ section.settings.image_mobile | img_url: 'master' }} {{ section.settings.image_mobile.width }}w"
        sizes="{% if section.settings.image_2 != blank and section.settings.stack_images_on_mobile %}(min-width: 750px) 50vw, 100vw{% elsif section.settings.image_2 != blank %}50vw{% else %}100vw{% endif %}"
        src="{{ section.settings.image_mobile | img_url: '1500x' }}"
        loading="lazy"
        alt="{{ section.settings.image_mobile.alt | escape }}"
        width="{{ section.settings.image_mobile.width }}"
        height="{{ section.settings.image_mobile.width | divided_by: section.settings.image_mobile.aspect_ratio }}"
        {% if section.settings.image_mobile != blank %}class="swiper-slide banner__media-image-half"{% endif %}
        >
        </div> -->
      </div>
    {%- endif -%}

  </div>
</div>

{% schema %}
  {
    "name": "Tenways video",
    "tag": "section",
    "class": "spaced-section spaced-section--full-width home-page-video",
    "settings": [
      {
        "type": "text",
        "id": "heading",
        "label": "t:sections.video.settings.heading.label"
      },
      {
        "type": "image_picker",
        "id": "image",
        "label": "image"
      },
      {
        "type": "image_picker",
        "id": "image_mobile",
        "label": "Mobile image"
      },
      {
        "type": "richtext",
        "id": "text_p",
        "default": "<p>Pair text with an image to focus on your chosen product, collection, or blog post. Add details on availability, style, or even provide a review.</p>",
        "label": "text"
      }, {
        "type": "richtext",
        "id": "title",
        "label": "title"
      }, {
        "type": "richtext",
        "id": "text",
        "label": "text"
      }, {
        "type": "text",
        "id": "button_label",
        "default": "button label",
        "label": "button label",
        "info": "button label"
      }, {
        "type": "url",
        "id": "button_link",
        "label": "button link"
      }, {
        "type": "url",
        "id": "button_link_us",
        "label": "button link us"
      }, {
        "type": "text",
        "id": "button_label_2",
        "label": "button label",
        "info": "button label"
      }, {
        "type": "url",
        "id": "button_link_2",
        "label": "button link"
      }
    ],
    "presets": [
      {
        "name": "Tenways video"
      }
    ]
  }
{% endschema %}